<template>
	<view class="yuechongzhi">
		<headertop str1="oridei" :back1="back1" title="余额充值"></headertop>
		<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Rectangle 21541@2x.png" class="yuechongzhiback" mode=""></image>
		<view class="dqyue">
			<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11622@2x.png" class="dqyueimg" mode=""></image>
			<view class="text">
				<view class="t1">
					当前账户余额
				</view>
				<view class="t2">
					{{userobj.money}}
				</view>
			</view>
			<view class="czbox">
				<view class="czjl" @click="gopage('充值记录')">
					<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (28).png" class="icon" mode=""></image>
					<span>充值记录</span>
				</view>
				<view class="jiange">

				</view>
				<view class="czjl" @click="gopage('余额明细')">
					<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (29).png" class="icon" mode=""></image>
					<span>余额明细</span>
				</view>
			</view>
		</view>
		<view class="czbox1">
			<view class="centrr">
				<view class="title1">
					<view class="border">

					</view>
					<view class="jine">
						充值金额
					</view>
				</view>
				<view class="jineboxss">
					<view class="itemjineboxss" :style="{'border':item==active?'1rpx solid #D8A278':''}"
						v-for="(item,index) in moneyobj['quick_amounts']" :key="index" @click="qiehuan(index)">
						<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11623@2x.png" v-if="active==index"
							class="leftbiaoshi" mode="">
						</image>
						<view class="jine">
							<span style="font-size: 20rpx;">￥</span>{{item.money}}
						</view>
						<view class="zstext">
							赠送{{item.gift}}元
						</view>
					</view>
				</view>
				<view class="shurujine">
					<span style="font-size: 20rpx;margin-left: 26rpx;color: #86909C;">￥</span>
					<input type="digit" v-model="money" placeholder="请输入充值金额" />
				</view>
				<view class="title1">
					<view class="border">

					</view>
					<view class="jine">
						充值说明
					</view>
				</view>
				<view class="czsmbox">
					{{moneyobj.czdetail}}
				</view>
				<view class="btnqd" @click="lijikaitong">
					确认充值
				</view>
				<view class="yuedutext">
					<image @click="flag=!flag"  :src="flag?'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11469@2x (1).png':'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Ellipse 2226@2x.png'"  class="gxk" mode="" />
					<view class="text">
						阅读并同意 <span style="color: #A46F3A;" @click="goxieyi">《{{titlexiyi}}》</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		moneylist,
		userinfo,
		rechargeorder,
		prepay
	} from '@/api/my.js'
	import {
		onPageScroll,
		onLoad
	} from "@dcloudio/uni-app";
	import headertop from '@/components/header.vue'
	import {
		ref,
		watch
	} from 'vue'
	import {
		article
	} from '@/api/home.js'
	const arr = ref([])
	const userobj = ref({})
	const moneyobj = ref({})
	const flag = ref(false)
	const titlexiyi = ref('')
	const money = ref('')
	const back1 = ref('')
	const active = ref(-1)
	onLoad(() => {
		init()
		getuser()
		initixeyi()
	})
	watch(money, (newval, oldval) => {
		if (newval) {
			var ind = moneyobj.value.quick_amounts.findIndex(item => item.money * 1 == newval * 1)
			active.value = ind
		}
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#FBE7D2'
		} else {
			back1.value = ''
		}

	})
	async function initixeyi() {

		const res = await article({
			id: 3
		})
		if (res.code == 1) {
			titlexiyi.value = res.data.title
		}
	}

	function goxieyi() {
		uni.navigateTo({
			url: '/pages/home/gmzn?typestr=' + '服务协议'
		})
	}

	function gopage(str) {
		if (str == '充值记录') {
			uni.navigateTo({
				url: '/pages/my/czjl'
			})
		} else if (str == '余额明细') {
			uni.navigateTo({
				url: '/pages/my/yemx'
			})
		}
	}
	async function init() {
		const res = await moneylist()
		if (res.code == 1) {

			moneyobj.value = res.data

		}
	}
	async function getuser() {
		const res = await userinfo()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}

	function qiehuan(ind) {
		active.value = ind
		money.value = moneyobj.value.quick_amounts[ind]['money']
	}

	async function lijikaitong() {
		if (!flag.value) {
			uni.showToast({
				icon: 'none',
				title: '请勾选服务协议'
			})
			return
		}
		if (money.value < 0 || !money.value) {
			uni.showToast({
				title: '充值金额必须大于0且不能为空',
				icon: 'none'
			})
			return
		}
		const res = await rechargeorder({
			recharge_money: money.value
		})
		if (res.code == 1) {
			const res1 = await prepay({
				order_sn: res.data.order_sn,
				payment: 'wechat'
			})
			var payobj = res1.data.pay_data
			uni.requestPayment({
				timeStamp: String(payobj.timeStamp),
				nonceStr: payobj.nonceStr,
				package: payobj.package,
				signType: payobj.signType,
				paySign: payobj.paySign,
				success(res) {
					setTimeout(() => {
						uni.showToast({
							title: '充值成功',
							icon: 'none'
						})
					}, 500)
					money.value = ''
					uni.navigateBack()
				},
				fail(e) {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				}
			})

		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
</script>
<style lang="scss">
	.yuechongzhi {
		width: 100%;
		overflow: hidden;
		position: relative;

		.yuechongzhiback {
			width: 100%;
			height: 314rpx;
			position: absolute;
			z-index: -1;
		}

		.czbox1 {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(221, 195, 123, 0.41);
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			overflow: hidden;
			margin-top: -30rpx;

			.centrr {
				width: 686rpx;
				margin: auto;
				overflow: hidden;

				.shurujine {
					width: 686rpx;
					height: 108rpx;
					background: #F7F8FA;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin: auto;
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
				}

				.jineboxss .itemjineboxss:nth-child(3n) {
					margin-right: 0 !important;
				}

				.jineboxss {
					width: 100%;
					overflow: hidden;
					margin-top: 34rpx;
					display: flex;
					flex-wrap: wrap;

					.itemjineboxss {
						width: 214rpx;
						height: 148rpx;
						background: #F7F8FA;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 20rpx;
						margin-bottom: 24rpx;
						position: relative;

						.leftbiaoshi {
							width: 44rpx;
							height: 44rpx;
							position: absolute;
							top: 0%;
							left: 0%;
						}

						.zstext {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							width: 100%;
							text-align: center;
							margin-top: 12rpx;
						}

						.jine {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 40rpx;
							color: #1D2129;
							margin-top: 32rpx;
						}
					}
				}

				.czsmbox {
					width: 574rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #4E5969;
					overflow: hidden;
					margin-top: 26rpx;
				}

				.btnqd {
					width: 686rpx;
					height: 82rpx;
					background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					text-align: center;
					line-height: 82rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					margin: auto;
					margin-top: 118rpx;
				}

				.yuedutext {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					margin-bottom: 92rpx;

					.gxk {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #86909C;
					}
				}

				.title1 {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 32rpx;

					.border {
						width: 4rpx;
						height: 32rpx;
						background: #D8A278;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
					}

					.jine {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #1D2129;
						margin-left: 16rpx;
					}
				}
			}
		}

		.dqyue {
			width: 730rpx;
			height: 396.38rpx;
			position: relative;
			margin: auto;
			margin-top: 188rpx;
			overflow: hidden;

			.dqyueimg {
				width: 100%;
				height: 396.38rpx;
				position: absolute;
				z-index: -1;
			}

			.czbox {
				width: 622rpx;
				overflow: hidden;
				margin: auto;
				margin-top: 70rpx;
				border-top: 2rpx solid rgba(255, 255, 255, 0.49);
				display: flex;
				align-items: center;

				.jiange {
					width: 2rpx;
					height: 52rpx;
					background: rgba(255, 255, 255, 0.49);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-top: 12rpx;
				}

				.czjl {
					width: 50%;
					display: flex;
					align-items: center;
					margin-top: 18rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #926322;
					justify-content: center;

					.icon {
						width: 36rpx;
						height: 36rpx;
						margin-right: 8rpx;
					}
				}
			}

			.text {
				margin: auto;
				margin-top: 58rpx;
				overflow: hidden;
				width: 622rpx;

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #926322;
				}

				.t2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 56rpx;
					color: #642D13;
					margin-top: 38rpx;
				}
			}
		}
	}
</style>